import React, { useEffect, Fragment, useState, useContext } from "react";
import { Form, Input, Button, Space, message } from "antd";
import styles from "./style.module.scss";
import socket from "../socket";

export default function Chat(props) {
    const { roomId, from, to, type, nickname, members } = props;
    console.log(props)
    const [word, setWord] = useState("");
    const changeMessage = (v) => {
        setWord(v.target.value);
    };
    const sendMessage = () => {
        if (!word) {
            return message.info("发送内容不能为空");
        }
        // let receive = to;
        // if (type == '1' || type == '2') {
        //     receive = (members.map(item => {
        //         return item.uuid;
        //     })).toString()
        // }
        // 如果是私聊才有to, 否则就不需要to;
        // 设置未读用户, unread设置除了自己外的其他用户,
        let receive = "";
        if (type === "0") {
            receive = to;
        }
        console.log("sendMsg: ", {
            roomId,
            from,
            to: receive,
            type,
            nickname,
            content: word,
        });
        // socket.emit("sendMsg", {
        //     roomId,
        //     from,
        //     to: receive,
        //     type,
        //     nickname,
        //     content: word,
        // });
        setWord("");
    };
    return (
        <Fragment>
            <div className={styles.form}>
                <div className={styles.record}>
                    {/* <div style={{ height: 300 }}></div> */}
                    <Input.TextArea
                        bordered={false}
                        className={styles.textarea}
                        value={word}
                        onChange={changeMessage}
                    />
                </div>
            </div>
            <div className={styles.control}>
                <Space>
                    <Button>关闭</Button>
                    <Button type="primary" onClick={sendMessage}>
                        发送
                    </Button>
                </Space>
            </div>
        </Fragment>
    );
}
